웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[CSS] 레이아웃 세로로 중앙정렬이 가능할까요? display속성 table-cell을 이용해 중앙정렬하기
Last Modified : 2019-08-12 / Created : 2014-03-07레이아웃 중 구현하기 어려운 부분 중 하나로 세로 정렬이 있습니다.
특정 태그를 정렬할 경우 가로 정렬은 쉽지만 세로 정렬은 쉽지 않죠? 이럴때 가급적 쉽게 적용이 가능한 방법입니다. 정해진 높이가 아닌 경우 height 값이 변하기 때문에 margin: auto 값으로 세로 정렬되지 않아 다른 방법을 찾아야하죠. 이를 해결하기 위한 방법은 자바스크립트를 이용할 수도 있지만 가장 간단한 방법은 역시 css를 사용하는 것입니다 .여기서는 display 속성의 table-cell 속성을 이용하는 방법입니다...
# 세로정렬 예제 소스보기
<style type="text/css">
div {
background: #f9f9f9;
width: 200px;
height: 200px;
border: 1px solid #d1d1d1;
box-sizing: border-box;
}
p {
position: absolute;
margin: 0;
padding: 0;
}
</style>
<div>
<p>Middle Alignment</p>
</div>
보시는 것처럼 div 태그 안에 있는 p 태그의 세로 정렬이 매우 간단하게 적용되었습니다.
참고로 이 방법은 IE8 이상의 버젼에서는 모두 적용 가능합니다. 아래는 나타나는 화면입니다.
* 실제 나타나는 화면
특정 태그를 정렬할 경우 가로 정렬은 쉽지만 세로 정렬은 쉽지 않죠? 이럴때 가급적 쉽게 적용이 가능한 방법입니다. 정해진 높이가 아닌 경우 height 값이 변하기 때문에 margin: auto 값으로 세로 정렬되지 않아 다른 방법을 찾아야하죠. 이를 해결하기 위한 방법은 자바스크립트를 이용할 수도 있지만 가장 간단한 방법은 역시 css를 사용하는 것입니다 .여기서는 display 속성의 table-cell 속성을 이용하는 방법입니다...
# 세로정렬 예제 소스보기
<style type="text/css">
div {
background: #f9f9f9;
width: 200px;
height: 200px;
border: 1px solid #d1d1d1;
box-sizing: border-box;
}
p {
position: absolute;
margin: 0;
padding: 0;
}
</style>
<div>
<p>Middle Alignment</p>
</div>
보시는 것처럼 div 태그 안에 있는 p 태그의 세로 정렬이 매우 간단하게 적용되었습니다.
참고로 이 방법은 IE8 이상의 버젼에서는 모두 적용 가능합니다. 아래는 나타나는 화면입니다.
* 실제 나타나는 화면
Middle Alignment
아래의 글도 찾고 계시지 않나요?
- [CSS] Flexbox 내부의 좌우 상하 정렬 방법 알아보기
- IE 브라우저에서 flex 엘리먼트의 vertical 정렬(세로정렬)이 안되는 이슈
- CSS display flex 사용방법 및 예제보기
팝업창 중앙정렬 가운데 위치시키는 방법
[자바스크립트] 배열을 역순으로 정렬, reverse()- [CSS] transform 속성에 상대값 사용하여 요소 이동시 발생하는 여백 또는 선 제거하는 방법
[CSS] 요소 및 레이어 중앙 정렬시키는 가장 쉽고 간단한 방법- 가변 길이의 요소에서 텍스트 세로정렬하는 방법
- [자바스크립트] 선택한 요소 중간에 위치시키는 방법, 예제보기
[CSS] position 속성이 absolute인 경우 상위 레이어 또는 전체 윈도우 기준 정렬방법